<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.body {
				width: 500px;
				height: 500px;
				border: 3px solid red;
				margin: 30px auto;
			}
			
			.body .title {
				width: 500px;
				height: 80px;
				background-color: burlywood;
			}
			
			.title .item {
				width: 150px;
				margin: 5px;
				height: 50px;
				text-align: center;
				background-color: gray;
				line-height: 50px;
				float: left;
			}
			
			.content .item {
				width: 480px;
				height: 380px;
				margin: 10px;
				background-color: darkcyan;
				display: none;
			}
			
			.title .item:nth-child(1) {
				background-color: red;
			}
			
			.content .item:nth-child(1) {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="body">
			<div class="title">
				<div class="item">新闻</div>
				<div class="item">娱乐</div>
				<div class="item">体育</div>
			</div>
			<div class="content">
				<div class="item">新闻</div>
				<div class="item">娱乐</div>
				<div class="item">体育</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var ti = document.querySelectorAll(".title .item");
		var ci = document.querySelectorAll(".content .item");

		for (var i = 0; i < ti.length; i++) {
			ti[i].index = i;
			ti[i].onclick = function() {
				for (var j = 0; j < ti.length; j++) {
					ti[j].style.backgroundColor = "gray";
					ci[j].style.display = "none";
				}
			
				ti[this.index].style.backgroundColor = "red";
				ci[this.index].style.display = "block";
			}

		}
	</script>

</html>